<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>3.分析Hello效果</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../../js/vue.js"></script>
  </head>
  <body>
    <!-- 准备一个容器 -->
    <div id="demo">
      <h1>Hello，{{school}}</h1>
      <h1>Hello，{{school.toUpperCase()}}</h1>
      <h1>Hello，{{1+1}}</h1>
      <h1>Hello，{{floor + 3}}</h1>
      <h1>Hello，{{floor > 6 ? '高楼层' : '低楼层'}}</h1>
      <h1>Hello，{{arr.map(item => item+1 )}}</h1>
    </div>

    <script type="text/javascript" >
      // 创建一个Vue实例对象
      new Vue({
        el:'#demo', 
        data:{
          school:'atguigu',
          floor:3,
          arr:[1,3,5,7],
        }
      })
    </script>
  </body>
</html>